<template>
  <div class="person">
    <h2>汽车信息</h2>
    <h2>一辆{{ car.brand }}车价值:{{ car.price }}w</h2>
    <button @click="changePrice">修改汽车的价格</button>
    <button @click="changeBrand">修改汽车的品牌</button>
    <button @click="changeCar">修改汽车</button>
    <hr />
    <h2>当前求和为:{{ sum }}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>

<script setup lang="ts" name="Person">
import { reactive, ref } from "vue";

// 数据
let car = reactive({ brand: "奔驰", price: 100 });
// let car = ref({ brand: "奔驰", price: 100 });
let sum = ref(0);

// 方法
function changePrice() {
  car.price += 10;
}
function changeBrand() {
  car.brand = "宝马";
}
function changeCar() {
  // 使用reactive定义对象类型的响应式数据
  // car = { brand: "奥运", price: 20 }; // car失去响应式页面不更新
  // car = reactive({ brand: "奥运", price: 20 }); // 不是响应式
  // 原因:car原本是一个Proxy对象,被赋值为一个普通对象,因此失去响应式
  Object.assign(car, { brand: "奥运", price: 20 }); // 解决办法
  // 对象合并不改变原对象

  // 使用ref定义对象类型的响应式数据
  // car.value = { brand: "奥运", price: 20 };
  // 使用ref定义的对象类型的响应式数据 xxx.value 为响应式
}
function changeSum() {
  sum.value += 1;
  // sum = ref(9); // 非响应式
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
li {
  font-size: 20px;
}
</style>
